<template>
  <KView class="sys-select-picker">
    <template v-if="isShow">
      <KView class="sys-select-picker-content" @click="inputClick">
        <KView v-if="label!==''" :style="labelStyle">{{label}}</KView>
        <KView class="sys-select-picker-input">
          <span v-if="selectObj===null" class="sys-select-picker-placeholder">{{placeholder}}</span>
          <span v-else>{{selectObj.label}}</span>
        </KView>
      </KView>

      <sys-dialog close-on-click-modal :visible.sync="openPicker" :left="0" :bottom="0" width="100%" height="45%" animation-name="bottom"
        :destroy-on-close="false">
        <select-picker ref="selectPicker" v-model="selectIndex" :placeholder="placeholder" :options="pickerOptions" :clearable="clearable"
          @change="pickerChange" @close="closePicker"></select-picker>
      </sys-dialog>
    </template>
  </KView>
</template>

<script>
  import SystemUtil from 'utils/systemUtil';

  import SysDialog from 'common/sysDialog';
  import SelectPicker from './selectPicker';

  export default {
    props: {
      value: {
        required: true
      },
      label: {
        type: String,
        default: ''
      },
      labelWidth: [String, Number],
      placeholder: {
        type: String,
        default: ''
      },
      options: {
        type: Array,
        default: () => []
      },
      labelField: {
        type: String,
        default: 'label'
      },
      valueField: {
        type: String,
        default: 'value'
      },
      clearable: {
        type: Boolean,
        default: false
      }
    },

    computed: {
      labelStyle() {
        let labelWidth = this.labelWidth;
        if (labelWidth === undefined) {
          return {};
        }

        if (typeof labelWidth === 'number') {
          labelWidth = SystemUtil.formatPx(labelWidth);
        }

        return {
          width: labelWidth
        }
      }
    },

    data() {
      return {
        isShow: false,
        pickerOptions: this.getPickerOptions(),
        selectIndex: null,
        selectObj: null,
        openPicker: false
      };
    },

    created() {
      this.setSelectOption();
      this.isShow = true;
    },

    methods: {
      getPickerOptions() {
        let options = this.options;
        let labelField = this.labelField;
        let valueField = this.valueField;
        let data = [];
        for (let i = 0; i < options.length; i++) {
          const obj = options[i];
          let type = typeof obj;
          if (['string', 'number'].indexOf(type) !== -1) {
            data.push({
              value: obj,
              label: obj
            });
          } else {
            data.push({
              value: obj[valueField],
              label: obj[labelField]
            });
          }
        }
        return data;
      },

      setSelectOption() {
        let value = this.value;
        if (SystemUtil.isEmpty(value)) {
          this.selectObj = null;
          this.selectIndex = null;
          return;
        }

        let pickerOptions = this.pickerOptions;
        let selectObj = null,
          selectIndex = null;
        for (let i = 0; i < pickerOptions.length; i++) {
          const obj = pickerOptions[i];
          if (obj.value === value) {
            selectObj = obj;
            selectIndex = i;
            break;
          }
        }
        this.selectObj = selectObj;
        this.selectIndex = selectIndex;
      },

      inputClick() {
        this.$refs['selectPicker'].resetIndex();
        this.openPicker = true;
      },

      pickerChange() {
        let selectIndex = this.selectIndex;
        let selectObj;
        if (selectIndex === null){
          selectObj = null;
        } else {
          selectObj = this.pickerOptions[selectIndex];
        }
        
        let value;
        if (selectObj === null) {
          value = '';
        } else {
          value = selectObj.value;
        }

        this.closePicker();
        this.selectObj = selectObj;
        this.$emit('input', value);
        this.$emit('change', value, selectObj);
      },

      closePicker() {
        this.openPicker = false;
      }
    },

    components: {
      SysDialog,
      SelectPicker
    }
  };

</script>

<style lang="scss">
  .sys-select-picker {
    .sys-select-picker-content {
      height: formatPx(40);
      line-height: formatPx(40);
      font-size: formatPx(26);
      display: flex;

      .sys-select-picker-input {
        flex: 1;
        min-width: 0;

        .sys-select-picker-placeholder {
          color: #aeaeae;
        }
      }
    }
  }

</style>
